<template>
  <div id="logLogin">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>日志管理</el-breadcrumb-item>
          <el-breadcrumb-item>登录日志</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" align="right"></el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="tableLogLogin"
          :data="tableLogLoginData"
          border
          stripe
          fit
          highlight-current-row
          v-loading="tableLogLoginLoading"
          max-height="1200"
        >
          <el-table-column type="index" label="序号" :index="indexMethod" width="80"></el-table-column>
          <el-table-column prop="userId" label="用户id" width="80"></el-table-column>
          <el-table-column prop="username" label="用户名" width="120"></el-table-column>
          <el-table-column prop="logined" label="登录时间" :formatter="dateFormat" width="180" sortable></el-table-column>
          <el-table-column prop="ip" label="IP" width="120"></el-table-column>
          <el-table-column prop="location" label="地址" width="180" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="terminal" label="设备" width="180" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="platform" label="操作系统" width="180" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 10, 20, 50, 100]"
          :page-size="50"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAPI } from '../assets/js/resources.js'
import { formatDate } from '../assets/js/nix.utils.js'
// var Qs = require('qs')

export default {
  name: 'logLogin',
  data() {
    return {
      page: 1,
      rows: 20,
      total: 100,
      tableLogLoginData: [],
      tableLogLoginLoading: false
    }
  },
  methods: {
    /* Table */
    loadTableLogLoginData() {
      this.tableLogLoginLoading = true
      var that = this
      this.$axios
        .get(getAPI('API_GET_LOG_LOGIN_LIST'), {
          params: {
            page: that.page,
            rows: that.rows
          }
        })
        .then(function(response) {
          if (response.data.status === 200) {
            that.tableLogLoginData = response.data.data.list
            that.total = response.data.data.total
            that.tableLogLoginLoading = false
          } else {
            that.$message.error(response.data.msg)
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleSizeChange(val) {
      // console.log("每页" + val + "条");
      this.rows = val
      this.loadTableLogLoginData()
    },
    handleCurrentChange(val) {
      // console.log("当前页:" + val);
      this.page = val
      this.loadTableLogLoginData()
    },
    indexMethod(index) {
      return index + 1
    },
    dateFormat(row, column, cellValue, index) {
      var date = new Date(cellValue)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  created() {
    this.loadTableLogLoginData()
  }
}
</script>

<style scoped>
</style>
